import React from 'react';
import {StyleSheet, View} from 'react-native';
import CardBody from './CardBody';
import CardFooter from './CardFooter';
import CardHeader from './CardHeader';

export default class Card extends React.Component {
  static defaultProps = {
    style: {},
    full: false,
  };

  static Header = CardHeader;
  static Body = CardBody;
  static Footer = CardFooter;

  render() {
    const {style, full, children, ...restProps} = this.props;
    const cardStyle = full ? styles.full : {};
    const childDom = React.Children.map(children,(child) => {
      return React.cloneElement(child );
    })
    return(
      <View style={[styles.card,cardStyle,style]} {...restProps}>
        {childDom}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  card: {
    borderWidth: 1,
    borderColor: '#dddddd',
    borderRadius: 5,
    paddingBottom: 6,
    flexDirection: 'column',
    backgroundColor: '#ffffff',
  },
  full: {
    borderRadius: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
  },

});
